﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>QlikView Mashups - Simple Document Integration</title>
    <link type="text/css" href="library/css/reset.css"  rel="stylesheet"/>
    <link type="text/css" href="library/css/smoothness/jquery-ui-1.9.1.custom.css"  rel="stylesheet"/>
    <link type="text/css" href="library/css/style.css"  rel="stylesheet"/>
    
    <script language="javascript" type="text/javascript" src="library/js/jquery-1.8.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="library/js/jquery-ui-1.9.1.custom.js"></script>
    <script language="javascript" type="text/javascript" src="library/js/QlikViewMashups.js"></script>

    
    <script type="text/javascript" language="javascript">
        $(function () {

            // Tabs
            $("#tabs").tabs();

            // Examples
            $(".lnkExample").button({
                icons: { primary: "ui-icon-link" }
            });
            $('#lnkExample1').click(function () {
                var url = qvAjax_Path + "opendoc.htm?document=" + docPath_WhatsNew;
                changeExample(url);
                jumpToTabExamples();
            });
            $('#lnkExample2').click(function () {
                var url = qvAjax_Path + "opendoc.htm?document=" + docPath_WhatsNew + "&bookmark=Document\\BM01";
                changeExample(url);
                jumpToTabExamples();
            });
            $('#lnkExample3').click(function () {
                var url = qvAjax_Path + "opendoc.htm?document=" + docPath_WhatsNew + "&select=LB02,2009";
                changeExample(url);
                jumpToTabExamples();
            });
            $('#lnkExample4').click(function () {
                var url = qvAjax_Path + "opendoc.htm?document=" + docPath_WhatsNew + "&bookmark=Document\\BM01&select=LB02,2009,2010&select=LB01,NORDIC&select=LB06,Cart%20Lynch";
                changeExample(url);
                jumpToTabExamples();
            });

            // Changes the URL of an example
            function changeExample(url) {
                var code = "&lt;iframe src=\"" + url + "\" width=\"100%\" height=\"500px\"&gt;";
                $("#ifrExample").attr("src", url);
                $("#preExample").html(code);
            }

            // Jumps to the example page and select the appropriate tab.
            function jumpToTabExamples() {
                $('#tabs').tabs({ selected: 2 });
            }
        });

    </script>
    <style type="text/css">
        .ui-menu { width: 250px; }
    </style>
</head>
<body>
    
    <div class="MainContainer">
        <div id="mnu" class="BackToIndex"><a id="mnuCaller" href="#">Menu</a></div>
        <div id="mnuContainer"></div>
        <h1>QlikView Mashups - Document Integration (using opendoc.htm)</h1>

        <div id="tabs">
        <ul>
            <li><a href="#tabs-introduction">Introduction</a></li>
            <li><a href="#tabs-parameters">Parameters & Examples</a></li>
            <li><a href="#tabs-example">Example Result</a></li>
        </ul>

            <div id="tabs-introduction">
                <h2 class="h2Tabs">Introduction</h2>
                <p>
                    These examples make use of "opendoc.htm" which is located in the QvAJAXZfc folder of the QlikView webserver.<br />
                    Opendoc.htm integration is always used in combination with an IFRAME Html-tag.
                </p>
                <p>
                    For getting the examples to work you just have to add an IFRAME tag into your existing website and you are done.
                </p>
                <p>
                    Note: The following examples make use of the QlikView application "What's new in QlikView11" on <a href="http://demo.qlikview.com" class="lnkBlue" target="_blank">demo.qlikview.com</a>.<br />
                </p>
            </div>

            <div id="tabs-parameters">
                <h2>Parameters</h2>
                <div>
                    <p>
                        Use the following parameters to define the behaviour how your QlikView application
                        should be integrated into your website:
                    </p>
                    <table style="width: 80%; margin-left: 60px;">
                        <thead>
                            <tr>
                                <th width="20%">QueryString Parameter
                                </th>
                                <th width="50%">Explanation
                                </th>
                                <th width="30%">Example
                                </th>
                            </tr>
                        </thead>
                        <tr>
                            <td class="oddRow">document
                            </td>
                            <td class="oddRow">Specify the path to the document on server
                            </td>
                            <td class="oddRow codeIt">document=Sales%20Compass.qvw
                            </td>
                        </tr>                       
                        <tr>
                            <td class="evenRow">bookmark
                            </td>
                            <td class="evenRow">Bookmark which should be called (using the ID of the bookmark)
                            </td>
                            <td class="evenRow codeIt">bookmark=Document\BM01
                            </td>
                        </tr>
                        <tr>
                            <td class="oddRow">select
                            </td>
                            <td class="oddRow">Specify any selection using field names and values<br />
                                <small><i>(Have a look at the examples below)</i></small>
                            </td>
                            <td class="oddRow codeIt">select=LB01,Germany
                            </td>
                        </tr>
                        <tr>
                            <td class="evenRow">ticket
                            </td>
                            <td class="evenRow">40 hex string that was returned by the Ticket webservice
                            </td>
                            <td class="evenRow codeIt"></td>
                        </tr>
                        <tr>
                            <td class="oddRow">host
                            </td>
                            <td class="oddRow">Host IP of the QlikView Server (optional if running on localhost)
                            </td>
                            <td class="oddRow codeIt">host=local
                            </td>
                        </tr>
                    </table>
                </div>

                <h2>Parameter Examples</h2>
                <div>
                    <table style="width: 80%; margin-left: 60px;">
                        <thead>
                            <tr>
                                <th style="min-width: 150px;">Action</th>
                                <th>Example</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="oddRow">Single selection (Germany) in listbox with ID = LB01</td>
                                <td class="oddRow codeIt">select=LB01,Germany</td>
                            </tr>
                            <tr>
                                <td class="evenRow">Multiple selection in one list box</td>
                                <td class="evenRow codeIt">select=LB01,Germany,USA</td>
                            </tr>
                            <tr>
                                <td class="oddRow">Multiple selection in multiple list boxes</td>
                                <td class="oddRow codeIt">select=LB01,Germany,Argentina&amp;select=LB02,AnotherDimension</td>
                            </tr>
                            <tr>
                                <td class="evenRow">Specify if it's a server or document object (document is default)</td>
                                <td class="evenRow codeIt">select=Document\LB01,Germany,USA
                                </td>
                            </tr>
                            <tr>
                                <td class="oddRow">Select a bookmark</td>
                                <td class="oddRow codeIt">bookmark=Document\BM01</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <h2>Code Examples:</h2>
                <div>
                    <p>
                        Integrating QlikView application "Whats new in QlikView11.qvw":
                    </p>
                    <pre class="wrapped">
                        &lt;iframe src="http://localhost/QvAJAXZfc/opendoc.htm?<span class="redBold">document</span>=Whats%20New%20in%20QlikView11.qvw" /&gt;
                    </pre>
                    <br />
                    <button id="lnkExample1" class="lnkExample">Load Example</button>
                    <br />
                    <hr />

                    <p>
                        Integrate QlikView application "Whats new in QlikView11.qvw" with bookmark "Customer Report" (with the Id "BM01"):
                    </p>
                    <pre class="wrapped">
                        &lt;iframe src="http://localhost/QvAJAXZfc/opendoc.htm?<span class="redBold">document</span>=Whats%20New%20in%20QlikView11.qvw&<span class="redBold">bookmark</span>=Document\BM01" /&gt;
                    </pre>
                    <br />
                    <button id="lnkExample2" class="lnkExample lnkClassic">Load Example</button>
                    <br />
                    <hr />

                    <p>
                        Integrate QlikView application "Whats new in QlikView11.qvw", selecting the year "2009" (in the listbox with the Id LB02):
                    </p>
                    <pre class="wrapped">
                    &lt;iframe src="http://localhost/QvAJAXZfc/opendoc.htm?<span class="redBold">document</span>=Sales%20Compass.qvw&<span class="redBold">select</span>=Document\LB02,2009" /&gt;
                    </pre>
                    <br />
                    <button id="lnkExample3" class="lnkExample">Load Example</button>
                    <br />
                    <hr />


                    <p>
                        Integrating QlikView application "Whats new in QlikView11.qvw" with the following selections:
                    </p>
                    <ul>
                        <li>Bookmark "Customer Report" (with the Id BM01)</li>
                        <li>Year 2009 and 2010 (list box with the Id LB02)</li>
                        <li>Region "NORDIC" (listbox with the Id LB01)</li>
                        <li>Sales Rep with the name "Cart Lynch" (listbox with the Id LB06)</li>
                    </ul>
                    <br />
                    <pre class="wrapped">
                    &lt;iframe src="http://localhost/QvAJAXZfc/opendoc.htm?<span class="redBold">document</span>=Sales%20Compass.qvw&<span class="redBold">select</span>=LB5698,2008,2009&<span class="redBold">select</span>=LB5699,Q1" /&gt;
                    </pre>
                    <br />
                    <button id="lnkExample4" class="lnkExample">Load Example</button>
                    <br />
                    <hr />
                </div>
            </div>

            <div id="tabs-example">
                <h2>Example</h2>
                <pre id="preExample" class="wrapped">
                ... please load an example ...
            </pre>
                <div class="divExample">
                    <iframe id="ifrExample" src="library/content/blank.html" width="100%" height="500px"></iframe>
                </div>
            </div>
        </div>


        <div id="divExplanation" class="hidden">

            <h2>Additional Comments:</h2>
            <p>
                <b>Open/Activate a Specific Sheet:</b><br />
                If you would like to open a specific sheet within your application, just create a bookmark exclusively for this sheet (using the "Save Layout State" option for bookmarks) and use the ID of this bookmark within your querystring.
            </p>

        </div>



    </div>
    <div id="divCopyright" class="Copyright"></div>

</body>
</html>
